// components/organisms/TopIconsPrivate.styles.js
import { styled, alpha } from '@mui/material/styles';
import { AppBar, Toolbar, Button, Typography, Box } from '@mui/material';
import { motion } from 'framer-motion';

// Main TopIconsPrivate styles
export const StyledAppBar = styled(AppBar)(({ theme, darkMode }) => ({
  background: theme.palette.background.default, // Use theme's background
  boxShadow: darkMode 
    ? `0 0 12px ${alpha('#58a6ff', 0.3)}` // GitHub blue shadow in dark mode
    : `0 0 12px ${alpha('#40d47e', 0.3)}`, // Original green shadow in light mode
  borderBottom: darkMode
    ? `1px solid ${alpha('#30363d', 0.5)}` // GitHub dark border
    : `1px solid ${alpha('#40d47e', 0.3)}`, // Original green border
  transition: 'all 0.3s ease',
}));

export const StyledToolbar = styled(Toolbar)(({ theme, darkMode }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  padding: theme.spacing(1, 2),
  background: 'transparent', // Keep transparent to inherit from AppBar
  borderRadius: '8px',
  backdropFilter: 'blur(6px)',
  [theme.breakpoints.up('md')]: {
    padding: theme.spacing(1, 3),
  },
  minHeight: '70px',
}));

export const ModernButton = styled(Button)(({ theme, darkMode }) => ({
  height: '30px',
  fontSize: '0.75rem',
  fontWeight: 600,
  borderRadius: '6px',
  marginRight: theme.spacing(0.5),
  textTransform: 'uppercase',
  backgroundColor: darkMode ? theme.palette.background.paper : '#fff', // Use theme colors
  color: darkMode ? theme.palette.text.primary : '#40d47e', // Use theme text color
  border: darkMode 
    ? `1px solid ${alpha('#58a6ff', 0.6)}` // GitHub blue border
    : `1px solid ${alpha('#40d47e', 0.6)}`, // Original green border
  '&:hover': {
    backgroundColor: darkMode
      ? alpha('#58a6ff', 0.1) // GitHub blue hover
      : alpha('#40d47e', 0.1), // Original green hover
    boxShadow: darkMode
      ? `0 0 8px ${alpha('#58a6ff', 0.5)}` // GitHub blue glow
      : `0 0 8px ${alpha('#40d47e', 0.5)}`, // Original green glow
  },
  transition: 'all 0.2s ease',
}));

// LogoComponent styles
export const StyledTypography = styled(Typography)(({ fontSize, darkMode, isHomePage }) => ({
  flex: '0 0 auto',
  fontWeight: 600,
  fontSize,
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  color: darkMode 
    ? '#f0f6fc' // GitHub white text in dark mode
    : (isHomePage ? '#fff' : '#40d47e'), // Original logic for light mode
  textShadow: darkMode
    ? `0 0 6px ${alpha('#58a6ff', 0.5)}` // GitHub blue glow
    : `0 0 6px ${alpha('#40d47e', 0.5)}`, // Original green glow
  letterSpacing: '0.08em',
  textTransform: 'uppercase',
}));

export const LogoWrapper = styled(Box)(({ darkMode }) => ({
  display: 'flex',
  alignItems: 'center',
  padding: '8px 0px',
  transition: 'all 0.3s ease',
  background: 'transparent',
}));

export const FixedLogoText = styled(motion.div)(({ darkMode, isHomePage }) => ({
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  fontSize: '1.2rem',
  fontWeight: 400,
  letterSpacing: '0.05em',
  color: darkMode ? '#f0f6fc' : '#40d47e', // GitHub white vs original green
  lineHeight: 1.1,
  position: 'relative',
  margin: 0,
  padding: 0,
}));

// Inline styles objects
export const secondToolbarSx = (scrolled, darkMode) => ({
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'center',
  padding: { xs: '0.5rem 1rem', md: '0.5rem 2rem' },
  minHeight: 'auto',
  width: '100%',
  opacity: scrolled ? 0.95 : 1,
  transition: 'opacity 0.3s ease',
  backgroundColor: 'transparent', // Let it inherit from theme instead of hardcoded
});

// UPDATED STYLE 1 of 6
export const dragHandleIconButtonSx = (darkMode) => ({
  backgroundColor: darkMode ? '#21262d' : '#f0f0f0', // GitHub dark vs original light
  borderRadius: '4px',
  boxShadow: 'none',
  transition: 'all 0.2s ease',
  ml: 1,
  border: darkMode ? '1px solid #30363d' : 'none', // GitHub border in dark mode
  '&:hover': {
    backgroundColor: darkMode ? '#30363d' : '#e0e0e0', // GitHub hover vs original
  },
  '&:active': {
    transform: 'scale(0.95)',
  },
});

// UPDATED STYLE 2 of 6
export const dragHandleIconSx = (darkMode) => ({
  color: darkMode ? '#f0f6fc' : '#333', // GitHub white vs original dark
  fontSize: '1.5rem',
  textShadow: 'none',
});

// UPDATED STYLE 3 of 6
export const homeIconSx = (iconSize, darkMode) => ({
  //fontSize: iconSize,
  color: darkMode ? '#f0f6fc' : '#333', // GitHub white vs original dark
  filter: 'none',
});

// UPDATED STYLE 4 of 6
export const homeIconButtonSx = (iconSize, darkMode) => ({
  //fontSize: iconSize,
  //width: iconSize,
  //height: iconSize,
  display: 'none',
  //display: 'flex',
  backgroundColor: darkMode ? '#21262d' : '#f0f0f0', // GitHub dark vs original light
  borderRadius: '4px',
  boxShadow: 'none',
  alignItems: 'center',
  justifyContent: 'center',
  ml: '-5px',
  border: darkMode ? '1px solid #30363d' : 'none', // GitHub border in dark mode
  '&:active': {
    transform: 'scale(0.97)',
  },
});

export const languageButtonSx = (darkMode) => ({
  padding: '0 12px',
  minWidth: 'auto',
  color: darkMode ? '#f0f6fc' : 'inherit', // GitHub white text in dark mode
  backgroundColor: darkMode ? '#21262d' : 'transparent', // GitHub dark background
  border: darkMode ? '1px solid #30363d' : 'none', // GitHub border
  '&:hover': {
    backgroundColor: darkMode ? '#30363d' : 'rgba(0, 0, 0, 0.04)', // GitHub hover
  },
});

export const featurePillSx = (darkMode) => ({
  ml: 2,
  display: 'flex',
  alignItems: 'center',
  height: '24px',
  borderRadius: '12px',
  px: 1.5,
  backgroundColor: darkMode 
    ? alpha('#58a6ff', 0.1) // GitHub blue background
    : alpha('#40d47e', 0.1), // Original green background
  border: darkMode
    ? `1px solid ${alpha('#58a6ff', 0.3)}` // GitHub blue border
    : `1px solid ${alpha('#40d47e', 0.3)}`, // Original green border
});

export const featurePillTypographySx = (darkMode) => ({
  fontSize: '0.65rem',
  fontWeight: 700,
  color: darkMode ? '#f0f6fc' : '#40d47e', // GitHub white vs original green
  letterSpacing: '0.05em',
  textTransform: 'uppercase',
});

export const menuPaperSx = (darkMode) => ({
  mt: 1,
  '& .MuiPaper-root': {
    borderRadius: '10px',
    backgroundColor: darkMode 
      ? alpha('#21262d', 0.95) // GitHub dark background
      : alpha('#fff', 0.92), // Original light background
    border: darkMode
      ? `1px solid ${alpha('#30363d', 0.5)}` // GitHub dark border
      : `1px solid ${alpha('#40d47e', 0.25)}`, // Original green border
    backdropFilter: 'blur(10px)',
    boxShadow: darkMode
      ? `0 0 12px ${alpha('#000', 0.5)}` // GitHub dark shadow
      : `0 0 12px ${alpha('#40d47e', 0.3)}`, // Original green shadow
  },
});

export const menuItemSx = (darkMode, selected = false) => ({
  fontSize: '0.8rem',
  py: 1,
  minWidth: '120px',
  color: darkMode ? '#f0f6fc' : '#40d47e', // GitHub white vs original green
  '&:hover': {
    backgroundColor: darkMode ? '#30363d' : alpha('#40d47e', 0.1), // GitHub hover
  },
  ...(selected && {
    '&.Mui-selected': {
      backgroundColor: darkMode 
        ? alpha('#58a6ff', 0.1) // GitHub blue selection
        : alpha('#40d47e', 0.1), // Original green selection
    },
  }),
});

export const disabledMenuItemSx = (darkMode) => ({
  fontSize: '0.8rem',
  opacity: 0.5,
  color: darkMode ? '#8b949e' : '#999', // GitHub muted vs original gray
});

// Fixed logo styles
export const fixedLogoContainerSx = (darkMode) => ({
  position: 'fixed',
  top: '10px',
  left: { xs: '10px', sm: '20px' },
  zIndex: 1300,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end',
  backgroundColor: darkMode ? alpha('#21262d', 0.8) : 'transparent', // GitHub dark background
  borderRadius: darkMode ? '8px' : '0', // Rounded in dark mode
  padding: darkMode ? '8px' : '0', // Padding in dark mode
  border: darkMode ? '1px solid #30363d' : 'none', // Border in dark mode
});

// LogoComponent link styles
export const logoLinkStyle = {
  display: 'flex',
  alignItems: 'center',
  textDecoration: 'none',
  cursor: 'pointer',
};

export const logoTextContainerSx = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end',
};

export const logoTextSx = {
  lineHeight: 0.8,
};

// UPDATED STYLE 5 of 6
export const portalButtonSx = (darkMode, additionalStyle = {}) => ({
  backgroundColor: darkMode ? '#21262d' : '#f0f0f0', // GitHub dark vs original light
  borderRadius: '4px',
  boxShadow: 'none',
  border: darkMode ? '1px solid #30363d' : 'none', // GitHub border in dark mode
  color: darkMode ? '#f0f6fc' : 'inherit', // GitHub white text
  '&:hover': {
    backgroundColor: darkMode ? '#30363d' : '#e0e0e0', // GitHub hover
  },
  ...additionalStyle,
});

// UPDATED STYLE 6 of 6
export const portalDragIconSx = (darkMode) => ({
  color: darkMode ? '#f0f6fc' : '#333', // GitHub white vs original dark
  fontSize: '1.5rem',
  textShadow: 'none',
});

// Home button sx (using languageButtonSx styles directly)
export const homeButtonSx = (darkMode) => ({
  padding: '0 12px',
  minWidth: 'auto',
  color: darkMode ? '#f0f6fc' : 'inherit', // GitHub white text in dark mode
  backgroundColor: darkMode ? '#21262d' : 'transparent', // GitHub dark background
  border: darkMode ? '1px solid #30363d' : 'none', // GitHub border
  '&:hover': {
    backgroundColor: darkMode ? '#30363d' : 'rgba(0, 0, 0, 0.04)', // GitHub hover
  },
});

// Account button sx (using languageButtonSx styles directly)
export const accountButtonSx = (darkMode) => ({
  padding: '0 12px',
  minWidth: 'auto',
  color: darkMode ? '#f0f6fc' : 'inherit', // GitHub white text in dark mode
  backgroundColor: darkMode ? '#21262d' : 'transparent', // GitHub dark background
  border: darkMode ? '1px solid #30363d' : 'none', // GitHub border
  '&:hover': {
    backgroundColor: darkMode ? '#30363d' : 'rgba(0, 0, 0, 0.04)', // GitHub hover
  },
});